<template>
  <view class="order-list-page">
    <view class="order-list-header">
      <view class="one-status" v-for="(item, index) in orderTypes" :key="index" :class="index == tabIndex ? 'active' : ''" @click="onClickItem(item, index)">{{ item.name }}</view>
    </view>
    <view class="order-list">
      <template v-if="orderList.length > 0">
        <view class="each-order" v-for="(item, index) of orderList" :key="index">
          <view class="header">
            <view class="order-no-status">
              <text class="no">{{item.createTime}}</text>
              <text class="status">{{item.orderStatus | formatState}}</text>
            </view>
          </view>
          <view class="good-detail" @click="enterOrderDetailPage(item)">
            <image class="good-img" :src="item.goodsImg"></image>
            <view class="name-price-num">
              <text class="name text-ov-one">{{item.goodsName}}</text>
              <view class="price-num">
                <text class="price">￥{{item.price}}</text>
                <text>x {{item.goodsNum}}</text>
              </view>
            </view>
          </view>
          <view class="total-num-price">
            <text class="num">共{{item.goodsNum}}件商品，合计：</text><text class="total">￥{{item.totalAmt}}</text>
          </view>
          <view class="opera-btns">
            <template v-if="item.orderStatus == '0'">
              <text class="each-btn cancel" @click="cancelOrderEvent(item)">取消</text>
              <text class="each-btn pay" @click="toPayMoney('', item)">支付</text>
            </template>
            <template v-if="item.orderStatus == '2'">
              <text class="each-btn pay" @click="toSureReceipt(item)">确认收货</text>
            </template>
            <template v-if="['3', '7'].includes(item.orderStatus)">
              <text class="each-btn evaluate" @click="toEvaluateEvent('', item)">评价</text>
            </template>
            <template v-if="['1', '2', '3', '9'].includes(item.orderStatus)">
              <text class="each-btn delete" @click="refundEvent(item)">退货</text>
            </template>
          </view>
        </view>
      </template>
      <template v-else>
        <image class="no-data-img" mode="aspectFit" src="/static/image/icon-noData.png"></image>
      </template>
    </view>
  </view>
</template>

<script>
const api = require('../../config/api')
const util = require('../../utils/util')
export default {
  name: 'orderList',
  data() {
    return {
      orderTypes: [
        { status: 5, name: '全部' },
        { status: 1, name: '待付款' },
        { status: 2, name: '待发货' },
        { status: 3, name: '待收货' },
        { status: 4, name: '已签收' }
      ],
      tabIndex: '0',
      orderParams: {
        orderStatus: 0,
        page: 1,
        limit: 10
      },
      activeColor: '#007aff',
      orderList: [],
      isLoadAll: false
    }
  },
  onPullDownRefresh() {
    this.isLoadAll = false
    this.orderParams.page = 1
    this.getOrderData()
  },
  onReachBottom() {
    if (!this.isLoadAll) {
      this.orderParams.page++
      this.getOrderData()
    } else {
      // uni.stopPullDownRefresh()
    }
  },
  filters: {
    formatState: function (_state) {
      if (_state === '0') {
        return '待支付'
      } else if (_state === '1') {
        return '待发货'
      } else if (_state === '2') {
        return '待收货'
      } else if (_state === '3') {
        return '待评价'
      } else if (_state === '4') {
        return '订单失效'
      } else if (_state === '5') {
        return '待退款'
      } else if (_state === '6') {
        return '退款审核中'
      } else if (_state === '7') {
        return '退款成功'
      } else if (_state === '8') {
        return '退款失败'
      } else if (_state === '9') {
        return '已评价'
      }
    }
  },
  onLoad: function (options) {
    this.getOrderData()
  },
  methods: {
    // 获取订单列表
    getOrderData() {
      util.request(api.myOrderUrl, this.orderParams, 'POST').then((res) => {
        console.log(res)
        if (res.code !== 0) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        } else {
          this.orderList = this.orderList.concat(res.data.records || [])
          if (res.data.records.length < res.data.size) {
            this.isLoadAll = true
          }
        }
      })
    },
    // 切换订单状态tab
    onClickItem(item, inx) {
      this.tabIndex = inx
      this.orderParams.orderStatus = item.status
      this.orderParams.page = 1
      this.orderList = []
      this.getOrderData()
    },
    // 取消订单
    cancelOrderEvent(item) {
      util.request(api.cancelOrderUrl + item.orderNo, {}, 'POST').then((res) => {
        console.log(res)
        if (res.code !== 0) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '取消订单成功',
            icon: 'none'
          })
          this.getOrderData()
        }
      })
    },
    // 退货
    refundEvent(item) {},
    // 删除订单
    deleteOrderEvent(item) {},
    // 查看订单详情
    enterOrderDetailPage(item) {
      uni.navigateTo({
        url: '/pages/order/orderDetail?orderNo=' + item.orderNo
      })
    },
    // 去评价
    toEvaluateEvent(x, item) {},
    // 去付款
    toPayMoney(x, item) {},
    // 确认收货
    toSureReceipt(item) {}
  }
}
</script>


<style lang="scss">
.order-list-page {
  height: 100%;
  .type-tabs {
    .segmented-control__text {
      font-size: 24rpx;
    }
  }
}
</style>
<style lang="scss" scoped>
.order-list-page {
  .order-list-header {
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .one-status {
      padding: 10rpx 0;
      font-size: 28rpx;
      position: relative;
      &.active {
        color: #2866ff;
        &:after {
          content: '';
          display: block;
          width: 100%;
          height: 2px;
          background-color: #2866ff;
          position: absolute;
          bottom: 0;
          left: 0;
          transition: all 0.3s;
        }
      }
    }
  }
  .order-list {
    // width: 710rpx;
    // margin: 0 auto;
    padding: 20rpx;
    background-color: #ececec;
    height: calc(100% - 100rpx);
    overflow: auto;

    .each-order {
      background-color: #ffffff;
      padding: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .order-no-status {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #f2f2f2;
          padding-bottom: 20rpx;
        }

        .no {
          color: #666;
          font-size: 28rpx;
        }

        .status {
          color: #2866ff;
          font-size: 28rpx;
        }
      }

      .good-detail {
        display: flex;
        align-items: center;

        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 20rpx;
        margin-top: 20rpx;
        margin-bottom: 20rpx;

        .good-img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 20rpx;
          margin-right: 30rpx;
          border: 1rpx solid #f2f2f2;
        }

        .name-price-num {
          width: 524rpx;
          height: 120rpx;
          padding: 8rpx;
          font-size: 32rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            font-size: 28rpx;
            color: #000;
          }

          .price-num {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price {
              color: #ff0000;
            }
          }
        }
      }

      .total-num-price {
        font-size: 28rpx;
        text-align: right;

        .total {
          color: #ff0000;
        }
      }

      .opera-btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20rpx;

        .each-btn {
          padding: 10rpx 20rpx;
          font-size: 24rpx;
          border: 1px solid #ececec;
          border-radius: 200rpx;
          margin-left: 20rpx;

          &.pay {
            color: #2866ff;
            border: 1px solid #2866ff;
          }
        }
      }
    }
  }
}
</style>